<!--
 * @Description: testAnalysis
 * @Author: your name
 * @Date: 2024-02-22
 * @LastEditTime: 2024-02-22
 * @LastEditors: Please set LastEditors
-->

<template>
  <div>
    <div class="testAnalysis heart_w">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/questionBank' }">
          题库
        </el-breadcrumb-item>
        <el-breadcrumb-item> title </el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 解析详情页 -->
      <div style="display: flex; justify-content: space-between">
        <div class="testBox">
          <div>
            <div class="casebox" v-if="!false">
              <!-- <div v-html="item.case_content"></div> -->
              <div>21300</div>
            </div>
            <div class="top">
              <h5>1.[单项选择题]</h5>
              <div class="operations">
                <div @click="wd_show = true">
                  <img src="@/assets/images/ask1.png" alt="" />
                  <span>提问</span>
                </div>
                <div @click="correct_err_show = true">
                  <img src="@/assets/images/errorCor1.png" alt="" />
                  <span>纠错</span>
                </div>
                <div @click="shoucang()">
                  <img
                    v-if="false"
                    src="@/assets/images/collected.png"
                    alt=""
                  />
                  <img
                    v-if="!false"
                    src="@/assets/images/noCollect.png"
                    alt=""
                  />
                  <span v-if="false">取消收藏</span>
                  <span v-if="!false">收藏</span>
                </div>
              </div>
            </div>

            <!-- 单选 -->
            <div v-if="!false">
              <div class="testTit">v-html="item.title"</div>
              <div class="options">
                <div
                  class="optionBox"
                  v-for="(item, index) in 4"
                  :key="index"
                  @click="chose_answer(item.position, item, index)"
                >
                  <div class="option">
                    {{ oplist[index] }}
                  </div>
                  <div class="optionText">option 123</div>
                </div>
              </div>
            </div>
            <!-- text题 -->
            <div v-if="false">
              <div>
                <div>v-html="item.title"</div>
                <input
                  v-model="user_answer_index"
                  type="text"
                  class="textinput"
                  @blur="
                    chose_answer(item.position, item, item.user_answer_index)
                  "
                />
                <div>文本题系统不做判断，请自评掌握情况:</div>
                <div class="tbtn">
                  <div
                    :class="{ active: 1 == opena }"
                    @click="isknow(item.position, item, 1)"
                  >
                    已掌握
                  </div>
                  <div
                    :class="{ active: 2 == opena }"
                    @click="isknow(item.position, item, 2)"
                  >
                    未掌握
                  </div>
                </div>
              </div>
            </div>

            <!-- footer按钮 -->
            <div class="openAnalysis">
              <div
                class="btn"
                @click="toprev(item.position)"
                style="margin-left: 10px"
              >
                上一题
              </div>
              <div class="btn" @click="tonext(item.position)">下一题</div>
            </div>

            <div class="analysisBox">
              <!-- 答案解析 -->
              <div class="yourAns">
                正确答案：<span>A</span>
                &nbsp;&nbsp;您的答案：
                <!-- oplist[Number(item.answer - 1)] -->
                <span v-if="false" style="color: #00af63 !important"> B </span>
                <span v-else style="color: #ff8a8d !important"> C </span>
              </div>

              <!-- 题目统计 -->
              <div class="center">
                <span class="tit">题目统计：</span>本题<span> 23人 </span>
                做过，平均正确率
                <span>21%</span>，易错选项
                <span> A </span>
              </div>

              <div class="center">
                <span>难度系数</span>
                <el-rate
                  v-model="level"
                  :colors="['#bd0000', '#ffb101', '#F7BA2A']"
                  disabled-void-color="#e0e0e0"
                  disabled
                  text-color="#ff9900"
                >
                </el-rate>
              </div>

              <div class="center">
                <span class="tit">个人统计：</span>
                <el-progress
                  style="width: 100px"
                  color="#00af63"
                  :percentage="50"
                  :show-text="false"
                ></el-progress>
                &nbsp;&nbsp;该题我做过<span>0</span>
                次，做对
                <span>2</span>
                次
              </div>

              <!-- 答案解析 -->
              <div v-if="!false">
                <span class="tit">答案解析：</span>
                <p style="width: 690px" v-html="analysis"></p>
              </div>
              <!-- 视频解析 -->
              <div>
                <span class="tit">视频解析：</span>
                <div
                  class="video"
                  style="width: 530px; height: 100%; background: #e0e0e0"
                >
                  <video-player
                    class="video-player vjs-custom-skin"
                    ref="videoPlayer"
                    :playsinline="true"
                    :options="playerOptions"
                    @play="onPlayerPlay($event)"
                    @pause="onPlayerPause($event)"
                    @playing="onPlayerPlaying($event)"
                    @ended="onPlayerEnded($event)"
                  >
                  </video-player>
                </div>
              </div>

              <div class="btmLine">
                <span class="tit">试题笔记：</span>
                <div class="rightCon">
                  <div class="nav">
                    <p
                      v-for="(e, i) in addType"
                      :key="'addType' + i"
                      :class="{ act: curtId == i }"
                      @click="chooseType(i)"
                    >
                      {{ e }}
                    </p>
                  </div>
                  <div class="noteBox" v-if="addShow">
                    <el-input
                      style="width: 700px"
                      resize="none"
                      :autosize="true"
                      type="textarea"
                      :placeholder="
                        curtId == 0 ? '请输入笔记内容' : '请输入问答内容'
                      "
                      v-model="noteInfo"
                      maxlength="200"
                      show-word-limit
                    >
                    </el-input>

                    <div class="updImg">
                      <span class="tit">上传图片：</span>
                      <div class="updBox">
                        <el-upload
                          action="#"
                          list-type="picture-card"
                          :on-preview="imgPreview"
                          :on-remove="handleRemove"
                          :http-request="upload_img"
                          :limit="3"
                          :on-exceed="handleExceed"
                        >
                          <i class="el-icon-plus"></i>
                        </el-upload>
                        <!-- 缩略图展示 -->
                        <el-dialog :visible.sync="wd_preview_show">
                          <img
                            width="100%"
                            :src="wd_preview_img"
                            alt="缩略图"
                          />
                        </el-dialog>
                      </div>
                    </div>

                    <div
                      style="margin-top: 20px; align-items: center"
                      v-show="curtId == 0"
                    >
                      <span class="tit">公开笔记：</span>
                      <el-radio-group
                        v-model="isPublic"
                        fill="#666666"
                        text-color="#bd0000"
                      >
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                      </el-radio-group>
                    </div>

                    <div style="margin-top: 20px">
                      <span class="tit">标记：</span>
                      <ul>
                        <li
                          v-for="(item, index) in tagArr"
                          :key="index"
                          @click="tagId = index"
                          :class="{ act: tagId == index }"
                        >
                          {{ item }}
                        </li>
                      </ul>
                    </div>

                    <div class="btns">
                      <button @click="unLode()">提交</button>
                      <button @click="addShow = false">取消</button>
                    </div>
                  </div>
                </div>
              </div>

              <div class="listBox">
                <div class="topTab">
                  <p
                    :class="{ act: listId == 0 }"
                    @click="getNodeLi(0)"
                    v-if="questlist.length >= 1"
                  >
                    相关问题
                  </p>
                  <p :class="{ act: listId == 1 }" @click="getNodeLi(1)">
                    相关笔记
                  </p>
                </div>
                <div class="list" v-if="listId == 1">
                  <div
                    class="item"
                    v-for="(item, index) in Nodes.list"
                    :key="index"
                  >
                    <div>
                      <span>123</span>
                      <span>99</span>
                    </div>
                    <div>00</div>
                    <!-- <div
                      class="img_listbi"
                      v-for="(imgitem, imgindex) in item.note_images_arr"
                      :key="imgindex"
                    >
                      <img :src="imgitem" alt="" />
                    </div> -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="tiList">
            <div class="tit">答题卡</div>
            <div class="listBox">
              <div class="testSitu">
                <p class="current">正确</p>
                <p class="error">错误</p>
                <p class="nodo">未答</p>
              </div>
              <div class="list" style="padding-top: 10px">
                <span
                  @click="cardto(item.position)"
                  class="nodo"
                  v-for="(item, index) in 15"
                  :key="index"
                >
                  {{ index + 1 }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 答疑 -->
    <transition name="leftToright">
      <div class="common_dialog ans_que" v-if="wd_show">
        <div class="inner_con">
          <div class="title">
            问答
            <div class="close" @click="close_wd"></div>
          </div>
          <div class="row">
            <button
              class="my_ans"
              style="background-color: #eb0808"
              @click="get_ask(1, 0)"
            >
              我的提问
            </button>
            <button
              class="other_ans"
              style="background-color: #fdaf42"
              @click="get_ask(0, 0)"
            >
              全部问答
            </button>
          </div>
          <div class="que_tit">
            <input
              type="text"
              v-model="wd_tit"
              placeholder="请输入需要提问的标题"
            />
          </div>
          <div class="que_info">
            <textarea placeholder="请输入您要提问的内容" v-model="wd_info">
            </textarea>
          </div>
          <div class="upd_box">
            <el-upload
              action="#"
              list-type="picture-card"
              :on-preview="imgPreview"
              :on-remove="handleRemove"
              :http-request="upload_img"
              :limit="3"
              :on-exceed="handleExceed"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </div>
          <div class="btm_btns">
            <button @click="close_wd">取消</button>
            <button @click="submit_wd">保存</button>
          </div>
        </div>
      </div>
    </transition>
    <!-- 缩略图展示 -->
    <el-dialog :visible.sync="wd_preview_show">
      <img width="100%" :src="wd_preview_img" alt="缩略图" />
    </el-dialog>
    <!-- 问答列表 -->
    <transition name="leftToright">
      <div class="common_dialog ask_box" v-if="ask_show">
        <div class="inner_box">
          <div class="top">
            <img
              src="https://www.rongyuejiaoyu.com/static/index/images/head5.jpg"
              alt="user_ava"
            />
            <!-- <h5 :title="ask_tit">{{ ask_tit }}</h5> -->
            <h5>ask_tit</h5>
            <button @click="ask_show = false">关闭</button>
          </div>
          <div class="tit_div">
            <p class="count">0条提问</p>
            <div class="type">
              <p :class="{ act_type: ask_type == 1 }" @click="get_ask(1, 1)">
                我的
              </p>
              <p :class="{ act_type: ask_type == 0 }" @click="get_ask(0, 1)">
                全部
              </p>
            </div>
          </div>
          <div class="list_item">
            <div class="item" v-for="(e, i) in ask_list" :key="i">
              <div class="top_con">
                <div class="avatar_box"><img :src="e.avatar" alt="" /></div>
                <div class="ana_box">
                  <p class="name">{{ e.username }}</p>
                  <p class="time">{{ e.new_add_time }}</p>
                  <p class="con">{{ e.question_title }}</p>
                </div>
              </div>
              <div class="img_box">
                <img
                  @click="show_big(item)"
                  :src="item"
                  alt=""
                  v-for="(item, index) in e.images"
                  :key="index"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>

    <!-- 纠错 -->
    <transition name="leftToright">
      <div class="common_dialog jc_dialog" v-if="correct_err_show">
        <div class="inner_con">
          <div class="title">
            纠错
            <div class="close" @click="close_err"></div>
          </div>
          <div class="body">
            <p class="t_title">
              CFALevel II“甄”题库Economics(2024N) LM1 Currency Exchange Rates:
              Understanding Equilibrium Value
            </p>
            <div class="choose_box">
              <el-radio-group v-model="error_form.err_choose">
                <el-radio size="medium" label="0">答案错误</el-radio>
                <el-radio size="medium" label="1">功能问题</el-radio>
                <el-radio size="medium" label="2">错误解析</el-radio>
                <el-radio size="medium" label="3">判分错误</el-radio>
                <el-radio size="medium" label="4">排版错误</el-radio>
                <el-radio size="medium" label="5">其他</el-radio>
              </el-radio-group>
            </div>
            <textarea
              placeholder="感谢您的意见和体验感受，我们一定会快速解决您的..."
              class="jc_input"
              v-model="error_form.correct_info"
            >
            </textarea>
            <div class="concat">
              联系方式：
              <input
                placeholder="您的手机号"
                type="text"
                v-model="error_form.your_phone"
              />
            </div>
          </div>
          <div class="btm_btn">
            <button class="cancel" @click="close_err">取消</button>
            <button class="sure" @click="submit_err()">确定</button>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'testAnalysis',
  data() {
    return {
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        autoplay: false, // 如果为true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 是否视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为, 立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: 'video/mp4', // 类型
            src: 'https://video.rycfa.com/sv/415bdb2a-18bcb9f637b/415bdb2a-18bcb9f637b.mp4' // url地址
          }
        ],
        // poster: '@/assets/images/material/video-bg.png', // 封面地址
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true // 是否显示全屏按钮
        }
      },
      analysis:
        '<p>A&nbsp;</p><p>SSE = 4,320, SST = 9,105. RSS = 9,105 - 4,320 = 4,785. n = 65, k = 4.&nbsp;</p><p>R <sup>2</sup> = 4,785 / 9,105 = 0.53.&nbsp;</p><p><img src="http://www.rongyuejiaoyu.com/ueditor/php/upload/image/20231116/1700120405568409.png" title="1700120405568409.png" alt="image.png"/></p>',
      wd_tit: '', // 问答标题
      wd_info: '', // 问答内容
      note_list: [], // 笔记列表
      filelist: [], // 文件上传列表
      ask_list: [], // 问答列表
      wd_preview_show: false, // 控制打开变量
      wd_preview_img: '', // 缩略图文件
      nowposition: 1, //当前题的题号
      user_answer_index: -1,
      opena: -1, // 1 掌握 2未掌握 -1 初始值
      ask_type: 1,
      ask_show: false,
      wd_show: false, // 提问
      questlist: '', // 提问列表
      correct_err_show: false, // 纠错
      error_form: {
        err_choose: '0', // 纠错/复选框
        correct_info: '', // 纠错/文本域
        your_phone: '' // 纠错/ 手机号
      },
      oplist: ['A', 'B', 'C', 'D', 'E'], //选项序号 循环数组
      addType: ['添加笔记', '添加问答'],
      tagArr: ['重点', '难点', '解题思路'],
      addShow: false,
      noteInfo: '',
      tagId: -1,
      curtId: -1,
      isPublic: 0,
      level: 3.7,
      listId: 0,
      Nodes: {}
    }
  },
  created() {},
  mounted() {
    console.log(this.$route)
    if (this.$route.name == 'frmPractice') {
      this.addOne()
    }
  },
  methods: {
    addOne() {
      this.$store.commit('hideGlobalComponent', false)
    },
    get_ask(id, is_open) {
      if (!is_open) {
        this.wd_show = false
        this.ask_show = true
      }
      this.ask_type = id
    },
    getNodeLi() {},
    unLode() {},
    chooseType(index) {
      this.curtId = index
      this.addShow = true
    },
    submit_err() {},
    close_err() {
      // 纠错
      this.correct_err_show = false
      this.error_form.correct_info = ''
      this.error_form.your_phone = ''
      this.error_form.err_choose = '0'
    },
    // 收藏
    shoucang() {},
    chose_answer(position, item, answer) {
      let _this = this
      console.log(
        _this.donum,
        answer,
        'chose_answer',
        position,
        _this.nowposition
      )
      // _this.nowposition = position
    },
    // 掌握/未掌握
    isknow(position, item, answer) {
      let _this = this
      // _this.opena = answer
      // _this.nowposition = position
      // if (item.text_index >= 0) {
      //   //文本题 判断是否掌握
      //   if (answer == 1) {
      //     _this.textarr[item.text_index].is_true = 1
      //   } else {
      //     _this.textarr[item.text_index].is_true = 0
      //   }
      // }
      // if (item.case_par_index >= 0) {
      //   // case 判断是否掌握
      //   if (answer == 1) {
      //     _this.casearr[item.case_par_index].list[
      //       item.case_my_index
      //     ].is_true = 1
      //   } else {
      //     _this.casearr[item.case_par_index].list[
      //       item.case_my_index
      //     ].is_true = 0
      //   }
      // }
    },
    // 答疑保存
    submit_wd() {},
    cardto(position) {
      //答题卡跳转
      // this.nowposition = position
    },
    close_wd() {
      this.wd_tit = ''
      this.wd_info = ''
      this.filelist = []
      this.wd_show = false
    },
    imgPreview(file) {
      console.log(file, '888888888')
      this.wd_preview_img = file.url
      this.wd_preview_show = true
    },
    handleRemove(file) {
      this.filelist.pop()
    },
    upload_img(res) {
      console.log(res, '22222222')
      this.filelist.push(res.file)
    },
    handleExceed() {
      this.$message({
        type: 'warning',
        message: '最多上传三张图片！',
        offset: 80
      })
    },

    // 监听播放
    onPlayerPlay(player) {
      // this.$signalr.SendMsg(6301, this.id, '开始播放视频')
      console.log('开始播放视频')
    },
    // 暂停视频
    onPlayerPause(player) {
      // this.$signalr.SendMsg(6302, this.id, '暂停视频')
      console.log('暂停视频')
    },
    // 视频继续播放
    onPlayerPlaying(player) {
      // this.$signalr.SendMsg(6303, this.id, '视频继续播放')
      console.log('视频继续播放')
    },
    // 视频播放结束
    onPlayerEnded(player) {
      // this.$signalr.SendMsg(6304, this.id, '视频播放结束')
      console.log('视频播放结束')
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/index.scss';
@import '@/assets/styles/frm_practice.scss';
.el-breadcrumb {
  font-size: 16px;
  padding: 15px 0;
}

.testAnalysis {
  margin-top: 80px;
  .testBox .analysisBox > div span {
    color: #666 !important;
    padding: 0 5px !important;
    font-weight: 550 !important;
    font-size: 14px;
  }
}

.tbtn {
  display: flex;
  div {
    margin-right: 12px;
    margin-top: 8px;
    cursor: pointer;
  }
}

.textinput {
  width: 100%;
  height: 70px;
  border: 1px solid #999;
  border-radius: 5px;
  padding: 5px;
  color: #333;
  font-size: 16px;
  line-height: 20px;
}
</style>
